<template>
  <div class="detail">
    <ProductParam :title="product.name"></ProductParam>
    <div class="wrapper clearfix">
      <div class="container" >
        <div class="swiper">
          <swiper :options="swiperOption">
            <swiper-slide><img src="/imgs/detail/phone-1.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/detail/phone-2.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/detail/phone-3.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/detail/phone-4.jpg" alt=""></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>
        <div class="content">
          <h2 class="pro-title">{{product.name }}</h2>
          <div class="pro-info">
            相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS / 骁龙845处理器 / <br>红外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏
          </div>
          <div class="shop-name">小米自营</div>
          <div class="pro-price">
            {{product.price}}元
            <span>1999元</span>
          </div>
          <div class="line"></div>
          <div class="shop-addr">
            <span class="iconfont icon">&#xe6c9;</span>
            <p class="addr">北京 北京市 朝阳区 安定门街道</p>
            <p class="store">有现货</p>
          </div>
          <div class="version">
            <h2>选择版本</h2>
            <div class="btn-group">
              <button class="btn btn-huge" :class="{'checked':version===1}" @click="version=1">4GB+64GB 全网通</button>
              <button class="btn btn-huge" :class="{'checked':version===2}" @click="version=2">6GB+64GB 全网通</button>
            </div>
          </div>
          <div class="shop-color ">
            <h2>选择颜色</h2>
            <button class="btn btn-huge checked">
              <span class="color"></span>
              深灰色
            </button>
          </div>
          <div class="total">
            <div class="phone-info clearfix">
              <div class="fl">{{product.name}}{{version===1?'6GB+64GB 全网通':'4GB+64GB 移动4G'}}</div>
              <div class="fr">{{product.price}}元</div>
            </div>
            <div class="total-price">
              总计：{{product.price}}
            </div>
          </div>
          <button class="btn btn-huge" @click="addCart">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="price-info">
      <div class="container">
        <h2>价格说明</h2>
        <img src="/imgs/detail/item-price.jpeg" alt="">
      </div>
    </div>
    <ServiceBar></ServiceBar>
  </div>
</template>

<script>
import ProductParam from '../components/ProductParam'
import ServiceBar from '../components/ServiceBar'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Detail',
  data () {
    return {
      id: this.$route.params.id,
      version: 1, // 商品版本切换
      product: {}, // 商品信息
      swiperOption: {
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }

    }
  },
  components: {
    ProductParam,
    ServiceBar,
    swiper,
    swiperSlide
  },
  mounted() {
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      this.axios.get(`/products/${this.id}`).then((res) => {
        this.product = res
      })
    },
    addCart() {
      this.axios.post('/carts', {
        productId: this.id,
        selected: true
        // 赋值默认
      }).then((res = { cartProductVoList: 0 }) => {
        console.log(res)
        this.$store.dispatch('saveCartCount', res.cartTotalQuantity)
        // this.$router.push('/cart');
      })
    }
  }
}
</script>
<style scoped lang="scss">
  @import "./../assets/scss/config";
  @import "./../assets/scss/mixin";
  @import "./../assets/scss/btn";
  .detail{
    .wrapper{
      .swiper{
        float:left;
        width: 642px;
        height: 617px;
        margin-top: 5px;
        img{
          width:100%;
          height:100%;
        }
      }
      .content{
        float: right;
        width: 584px;
        height: 870px;
        .pro-title{
          font-size: 28px;
          padding-top: 30px;
          padding-bottom: 16px;
          height: 26px;
        }
        .pro-info{
          font-size: 14px;
          height: 36px;
        }
        .shop-name{
          font-size: 16px;
          color: $colorA;
          margin-top: 26px;
          margin-bottom: 16px;
          height: 15px;
        }
        .pro-price{
          font-size: 20px;
          color: $colorA;
          height: 19px;
          span{
            font-size: 16px;
            color: #999;
            margin-left: 10px;
            text-decoration: line-through;
          }
        }
        .line{
          height: 0;
          margin-top: 25px;
          margin-bottom: 28px;
          border-top: 1px solid $colorH;
        }
        .shop-addr{
          position: relative;
          height: 108px;
          background-color: #fafafa;
          border: 1px solid #e5e5e5;
          box-sizing: border-box;
          padding-top: 31px;
          padding-left: 64px;
          font-size: 14px;
          line-height: 14px;
          .icon{
            position: absolute;
            top: 30px;
            left: 33px;
            font-size: 26px;
          }
          .addr{
            color: #666;
          }
          .store{
            margin-top: 15px;
            color: $colorA;
          }
        }
        .version, .shop-color{
          margin-top: 30px;
          h2{
            font-size: 18px;
            margin-bottom: 20px;
          }
          .btn-huge{
            width: 280px;
            background-color: #fff;
            color: $colorB;
            border: 1px solid $colorF;
          }
          .color{
            display:inline-block;
            width:14px;
            height:14px;
            background-color:#666666;
          }
          .checked{
            color: $colorA;
            border: 1px solid $colorA;
          }
        }
        .total{
          height: 108px;
          background: #FAFAFA;
          padding: 24px 33px 29px 30px;
          font-size: 14px;
          margin-top:50px;
          margin-bottom:30px;
          box-sizing: border-box;
          .total-price{
            font-size: 24px;
            color: #FF6600;
            margin-top: 18px;
          }
        }
      }
    }
    .price-info{
      background-color: #f3f3f3;
      height: 340px;
      h2 {
        font-size: 24px;
        color: #333;
        padding-top: 38px;
        margin-bottom: 30px;
      }
      img{
        width: 100%;
      }
    }
  }
</style>
